<template>
  <div id="edit" contenteditable="true" @input="onInput" v-html="content"></div>
</template>
<script>
export default {
  props: {
    content: String
  },
  data () {
    return {
      timmer: null,
      savedRange: null
    }
  },
  methods: {
    onInput (e) {
      if (this.timmer) {
        window.clearTimeout(this.timmer)
      }
      this.timmer = window.setTimeout(() => {
        // save range
        this.savedRange = window.getSelection().getRangeAt(0)
        this.timmer = null
      }, 1000)
    }
  },
  watch: {
    async content (v) {
      // get the editable div
      // and focus it (vue will focus it automatically)
      var node = this.windowSelection
      node.removeAllRanges()
      node.addRange(this.savedRange)
    }
  }
}
</script>
